<template>
  <vx-card class="pt-5" full>
    <div class="roleSearchTop">
      <div class="roleSearch">
        <vs-input
          label="角色名称"
          size="small"
          icon="icon-search"
          icon-pack="feather"
          icon-after="true"
          class="inputx no-icon-border"
          v-model="searchList.realName"
          @blur="filterRole()"
        />
      </div>
      <vs-button
        color="primary"
        icon="icon-plus"
        icon-pack="feather"
        @click="handleAddRole"
        size="small"
      >新增</vs-button>
    </div>
    <vx-table
      :data="tableData"
      :total="recordsTotal"
      :pageSize="pageSize"
      @current-change="currentChange"
      class="mt-4"
    >
      <el-table-column prop="name" label="角色名" width="300"></el-table-column>
      <el-table-column prop="remark" label="备注" width="150"></el-table-column>
      <el-table-column prop="type" label="类型" width="150">
        <template slot-scope="scope" align="center">
          <span v-if="scope.row.type == 1">管理员</span>
          <span v-else>其他</span>
        </template>
      </el-table-column>
      <el-table-column label="权限配置" width="150">
        <template slot-scope="scope">
          <feather-icon
            icon="SettingsIcon"
            :svgClasses="['stoke-current text-primary  w-5 h-5']"
            class="cursor-pointer p-2"
            title="配置"
            @click.stop="handleConfig(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <feather-icon
            icon="EditIcon"
            :svgClasses="['stoke-current text-primary  w-5 h-5']"
            class="cursor-pointer p-2"
            title="编辑"
            @click.stop="handleEdit(scope.$index, scope.row)"
          />
          <!-- <feather-icon
            v-if="scope.row.status == 1"
            icon="LockIcon"
            title="冻结"
            :svgClasses="['stoke-current text-warning  w-5 h-5']"
            class="cursor-pointer p-2"
            @click.stop="handleSwitch(scope.$index, scope.row)"
          />
          
          <feather-icon
            v-else
            title="启用"
            icon="LockIcon"
            :svgClasses="['stoke-current text-success  w-5 h-5']"
            class="cursor-pointer p-2"
            @click.stop="handleSwitch(scope.$index, scope.row)"
          />-->
          <feather-icon
            icon="Trash2Icon"
            title="删除"
            :svgClasses="['stoke-current text-danger  w-5 h-5']"
            class="cursor-pointer p-2"
            @click.stop="handleDelete(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </vx-table>
    <!--权限配置模态框开始 -->
    <vx-popup
      classContent="popup-example"
      title="权限配置"
      :active.sync="popupActivoConfig"
      :isValid="true"
      @confirmPopup="confirmPowerConfig"
      @cancelPopup="popupActivoConfig = false"
    >
      <VuePerfectScrollbar class="powerConfigTree">
        <tree-component
          :data="treeData"
          node-key="id"
          ref="tree"
          show-checkbox
          :render-content="renderContent"
          accordion
          :default-expanded-keys="[0]"
        ></tree-component>
      </VuePerfectScrollbar>
    </vx-popup>
    <!-- 权限配置模态框结束 -->
    <!--新增模态框开始 -->
    <vx-popup
      classContent="popup-example"
      title="新增角色"
      :active.sync="popupActivoAdd"
      :isValid="isHasErrorBags"
      @confirmPopup="addRole"
      @cancelPopup="popupActivoAdd = false;"
    >
      <vs-input label="角色名称：" class="inputx mt-2" v-model="popList.roleName" name="角色名称" />
      <span class="text-danger text-sm" v-show="errorBags.has('角色名称')">{{ errorBags.first('角色名称')}}</span>
      <vs-select label="类型：" v-model="popList.type">
        <vs-select-item text="管理员" value="1" />
        <vs-select-item text="其他" value="2" />
      </vs-select>
      <vs-input label="备注：" class="inputx mt-2" v-model="popList.remarks" />
    </vx-popup>
    <!-- 新增模态框结束 -->
    <!--修改模态框开始 -->
    <vx-popup
      classContent="popup-example"
      title="修改角色信息"
      :active.sync="popupActivo"
      :isValid="!errorBags.any()"
      @confirmPopup="editorData"
      @cancelPopup="popupActivo = false"
    >
      <vs-input
        label="角色名称："
        class="inputx mt-2 red"
        v-model="popList.roleName"
        name="角色名称"
        v-validate="'required'"
      />
      <span class="text-danger text-sm" v-show="errorBags.has('角色名称')">{{ errorBags.first('角色名称')}}</span>

      <vs-input label="备注：" class="inputx mt-2" v-model="popList.remarks" />
      <!-- <vs-select label="类型：" v-model="popList.type">
        <vs-select-item text="管理员" value="1" />
        <vs-select-item text="其他" value="2" />
      </vs-select> -->
    </vx-popup>

    <!-- 修改模态框结束 -->
    <!--删除模态框开始 -->
    <vx-popup
      classContent="popup-example"
      title="删除"
      :isValid="true"
      :active.sync="popupActivoDel"
      @confirmPopup="delData"
      @cancelPopup="popupActivoDel = false"
    >
      <span>确定删除这个角色吗？</span>
    </vx-popup>
    <!-- 删除模态框结束 -->
  </vx-card>
</template>
<script>
import TreeComponent from "@/components/model-tree/ModelTree.vue";
import VuePerfectScrollbar from "vue-perfect-scrollbar";
import PROJECT_CONFIG from "@/../public/project.config";
export default {
  data() {
    return {
      searchList: {
        realName: "",
        status: "",
      },
      recordsTotal: 0,
      tableData: [],
      selectRoleId: "",
      popList: {
        roleName: "",
        remarks: "",
        selectRoleId: "",
        type: null,
      },
      popPasswordlist: {
        originalPassword: "",
        newPassword: "",
        confirmNewPassword: "",
      },
      treeData: [
        {
          id: 0,
          name: "资源",
          type: 0,
          children: [],
        },
      ],
      popupActivoConfig: false,
      popupActivoAdd: false,
      popupActivo: false,
      popupActivoPassword: false,
      popupActivoDel: false,
      currentPage: 1,
      pageSize: 7,
    };
  },
  methods: {
    //分页
    currentChange(currentPage) {
      this.currentPage = currentPage * this.pageSize - this.pageSize;
      this.filterRole(currentPage * this.pageSize - this.pageSize);
    },
    //根绝角色名称筛选
    filterRole(startPage) {
      this.$api.accessControl
        .rolePaging({
          start: startPage || 0,
          length: this.pageSize,
          roleName: this.searchList.realName,
          status: this.searchList.status,
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.recordsTotal = res.data.recordsTotal;
        })
        .catch(() => {});
    },
    //权限配置树名称显示
    renderContent(h, { node }) {
      let iconSkin;
      if (node.data.type == 2) {
        iconSkin = "icon-page";
      } else if (node.data.type == 3 || node.data.type == 4) {
        iconSkin = "icon-button";
      } else {
        iconSkin = "icon-menu";
      }
      return (
        <span class="custom-tree-node flex items-center">
          <i class={`othericon ${iconSkin}`} />
          <span style="margin-left:5px;">{node.data.name}</span>
        </span>
      );
    },
    //权限配置
    handleConfig(index, row) {
      this.$api.accessControl
        .configRole(row.roleId)
        .then((res) => {
          this.popupActivoConfig = true;
          this.selectRoleId = row.roleId;
          this.$refs.tree.$refs.tree.setCheckedKeys(res.data.data);
        })
        .catch();
    },
    //确认权限配置
    confirmPowerConfig() {
      this.popupActivoConfig = false;
      let selectedId = this.$refs.tree.$refs.tree.getCheckedKeys();
      if (selectedId[0] == 0) {
        selectedId.splice(0, 1);
      }
      this.$api.accessControl
        .rolePowerConfirm({
          roleId: this.selectRoleId,
          resourceId: selectedId,
        })
        .then((res) => {
          if (res.data.success) {
            this.$vs.notify({ text: "配置成功", color: "success" });
          } else {
            this.$vs.notify({ text: "配置失败", color: "danger" });
          }
        })
        .catch();
    },
    //表格行新增
    handleAddRole() {
      this.$validator.reset();
      this.popupActivoAdd = true;
      this.popList.roleName = "";
      this.popList.remarks = "";
    },
    addRole() {
      this.popupActivoAdd = false;
      let param = {
        name: this.popList.roleName,
        remark: this.popList.remarks,
        type: this.popList.type,
      };
      this.$api.accessControl
        .addRole(param)
        .then((res) => {
          if (res.data.success) {
            this.$vs.notify({ text: "新增成功", color: "success" });
            this.popList.roleName = "";
            this.popList.remarks = "";
            this.filterRole(this.currentPage);
          } else {
            this.$vs.notify({ text: "新增失败", color: "danger" });
          }
        })
        .catch(() => {});
    },
    //表格行编辑
    handleEdit(editorIndex, editorRow) {
      this.popupActivo = true;
      this.popList.selectRoleId = editorRow.roleId;
      this.popList.roleName = editorRow.name;
      this.popList.remarks = editorRow.remark;
      this.popList.type = editorRow.type;
    },
    editorData() {
      this.popupActivo = false;
      let params = {
        roleId: this.popList.selectRoleId,
        name: this.popList.roleName,
        remark: this.popList.remarks,
        type:Number(this.popList.type)
      };
      this.$api.accessControl
        .editRole(params)
        .then((res) => {
          if (res.data.success) {
            this.$vs.notify({ text: "修改成功", color: "success" });
            this.popList.roleName = "";
            this.popList.remarks = "";
            this.filterRole(this.currentPage);
          } else {
            this.$vs.notify({ text: "修改失败", color: "danger" });
          }
        })
        .catch(() => {});
    },
    //表格行冻结
    //权限
    handleSwitch(index, row) {
      console.log(row);
      let params = {
        roleId: row.roleId,
        name: row.name,
        type: row.type,

        status: row.status == 1 ? 0 : 1,
      };
      console.log(index);
      this.$api.accessControl
        .editRole(params)
        .then((res) => {
          if (res.data.success) {
            this.$vs.notify({ text: "修改成功", color: "success" });
            this.filterRole(this.currentPage);
          } else {
            this.$vs.notify({ text: "修改失败", color: "danger" });
          }
        })
        .catch(() => {});
      // if (row.status == 1) {
      //   this.$api.accessControl
      //     .roleStatusFrozen(row.roleId)
      //     .then(res => {
      //       if (res.data.success) {
      //         this.filterRole(this.currentPage);
      //         this.$vs.notify({ text: "冻结成功", color: "warning" });
      //       } else {
      //         this.$vs.notify({ text: "冻结失败", color: "danger" });
      //       }
      //     })
      //     .catch(() => {});
      // } else {
      //   this.$api.accessControl
      //     .roleStatusEnable({ roleId: row.roleId })
      //     .then(res => {
      //       if (res.data.success) {
      //         this.filterRole(this.currentPage);
      //         this.$vs.notify({ text: "启用成功", color: "success" });
      //       } else {
      //         this.$vs.notify({ text: "启用失败", color: "danger" });
      //       }
      //     })
      //     .catch(() => {});
      // }
    },
    //表格行删除
    handleDelete(index, row) {
      this.popupActivoDel = true;
      this.popList.selectRoleId = row.roleId;
    },
    delData() {
      this.$api.accessControl
        .delRole(this.popList.selectRoleId)
        .then((res) => {
          this.popupActivoDel = false;
          if (res.data.success) {
            this.$vs.notify({
              text: "删除成功",
              color: "success",
            });
            this.filterRole(this.currentPage);
          } else {
            this.$vs.notify({
              text: "删除失败",
              color: "danger",
            });
          }
        })
        .catch(() => {});
    },
    // 获取树的数据
    getTree() {
      this.$api.accessControl
        .resourceTree(PROJECT_CONFIG.appkey)
        .then((res) => {
          this.treeData[0].children = res.data.data;
        })
        .catch(() => {});
    },
  },
  computed: {
    isHasErrorBags() {
      return !this.errorBags.any() && this.popList.roleName != "";
    },
  },
  mounted() {
    this.filterRole();
    this.getTree();
    // this.tableData= [
    //     {
    //       name:"xsp",
    //       remark:123,
    //       status:1
    //     },
    //     {
    //       name:"xsp",
    //       remark:123,
    //       status:1
    //     },
    //     {
    //       name:"xsp",
    //       remark:123,
    //       status:1
    //     },
    //     {
    //       name:"xsp",
    //       remark:123,
    //       status:1
    //     },

    //   ]
  },
  components: {
    TreeComponent,
    VuePerfectScrollbar,
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/baseColor.scss";
.powerConfigTree {
  height: 26rem;
}
.roleSearchTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .vs-component.vs-con-input-label.vs-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 22rem;
    /deep/ .vs-input--label {
      margin-right: 0.8rem;
    }
    /deep/ .vs-inputx.vs-input--input.hasIcon.icon-after-input {
      padding: 0.7rem 1rem !important;
    }
  }
}
.roleSearch {
  position: relative;
}
.addRoleBtn {
  color: #fff;
  background: $mainColor;
}
/deep/ .vs-popup {
  width: 400px;
  .con-select,
  .vs-input {
    width: 100% !important;
    margin: 0 auto;
  }
}
.saveAddData {
  float: right;
}
/deep/.vs-input--input.normal {
  font-size: 11.9px;
}
/deep/ i.othericon {
  color: $mainColor;
  font-size: 14px;
}
</style>
